<template>
  <div class="index">
    <expert-com :list="list" :type="type"></expert-com>
    <div class="evalua">
      <h3>技术水平: <van-rate :value="skill" /></h3>
      <h3>服务态度: <van-rate :value="service" /></h3>
      <van-field
        :value="message"
        rows="3"
        autosize
		:disabled="true"
        label=""
        class="field"
        type="textarea"
        placeholder="请输入对专家的评价内容"
      />
      <van-button type="info" class="btn" block @click="back">返回</van-button>
    </div>
  </div>
</template>

<script>
import { Rate, Field, Button } from 'vant'
import expertCom from '../components/response/index'
import API from '@/services/index'
export default {
	name: 'index',
	components: {
		expertCom,
		VanRate: Rate,
		VanField: Field,
		VanButton: Button,
	},
	data() {
		return {
			skill: 0,
			service: 0,
			message: '',
			list: {},
			type: 'online',
		}
	},
	created() {
		this.seeEvaluate()
	},
	methods: {
		async seeEvaluate() {
			const res = await API.seeEvaluate({
				params: {
					sourceId: this.$route.params.id,
				},
			})
			console.log(res)
			this.message = res.commtent
			this.service = res.severStar
			this.skill = res.skillStar
			this.list = {
				company: res.company,
				createTime: res.createTime.replace('T', ' '),
				expertAvatar: res.expertAvatar,
				level: res.level,
				expertName: res.expertName,
				avaSkillStar: res.avaSkillStar,
				title: res.description,
			}
			// this.list = data.find(el => el.id === this.$route.params.id)
		},
		back() {
			this.$router.back()
		},
	},
}
</script>

<style lang='scss' scoped>
.index {
    .evalua {
        .field {
            background-color: rgba(236, 236, 236, 0.842);
        }
        .btn {
			width: calc( 100% - 32px);
			position: absolute;
			// margin-top: 30px;
			bottom: 16px;
        }
    }
}
</style>
